<template>
	<div class="login">
		<!-- 右侧账户登录 -->
		<div class="right">
			<div class="card">
				<div class="title">
					重置新密码
				</div>
				<div class="tabs">
					<div class="active">
						在修改登录密码后的24小时内，如使用其他设备登录
						此账号，将暂时无法提现
					</div>
				</div>
				<template v-if="isTell">
					<el-form label-position="top" :model="formData" ref="formRules" :rules="rules">
						<el-form-item prop="setPassword">
							<div class="row_ w-100%">
								<p>新密码</p>
								<div class="row_flex">
									<el-input placeholder="请设置新密码" v-model="formData.setPassword" type="password"
										show-password class="input_" />
								</div>
							</div>
						</el-form-item>
						<div class="made">
							<p>
								<span>请输入8-32个字符的，至少包含1个数字，1个大写字母，1个小写字母</span>
							</p>
						</div>
						<el-form-item prop="resetPassword">
							<template #default>
								<p class="label-title">确认新密码</p>
								<el-input class="h-58px " style="font-size: 18px;" v-model="formData.resetPassword"
									type="password" show-password placeholder="请再次输入新密码" />
							</template>
						</el-form-item>
					</el-form>
				</template>
				<template v-else>
				</template>
				<div>
					<el-button class="btn" type="primary" color="#114CEE" @click="submitClick(formRules)">确定</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { validatePassword } from '@/utils/common';

const formRules = ref<FormInstance>();
const isTell = ref<boolean>(true);

interface IFormData {
	setPassword: string;
	resetPassword: string;
}

const formData = ref<IFormData>({
	setPassword: '',
	resetPassword: ''
})
// 首次输入密码校验，密码格式要求
const setPasswordValidate = (rule: any, value: string, callback: any) => {
	if (value === '') {
		return callback(new Error('请输入密码'));
	} else {
		if(!validatePassword(value)){
			return callback(new Error('密码格式错误!'));
		}
		// validateField
		if (formData.value.resetPassword !== '') {
			formRules.value?.validateField('confirmPassword', (error: any) => {
				if (!error) {
					return callback(new Error('两次输入密码不一致!'));
				} else {
					return callback();
				}
			});
		}
		else {
			return callback();
		}
	}
};
// 重复输入密码验证
const resetPasswordValidate = (rule: any, value: string, callback: any) => {
	if (value === '') {
		console.log('formRules')
		return callback(new Error('请再次输入密码'));
	} else if (value !== formData.value.setPassword) {
		return callback(new Error('两次输入密码不一致!'));
	} else {
		return callback();
	}
};

// 检验规则
const rules = {
	setPassword: [
		{
			validator: setPasswordValidate,
			trigger: 'change'
		}
	],
	resetPassword: [
		{
			validator: resetPasswordValidate,
			trigger: 'change'
		}
	],
}

// 按钮提交
const submitClick = (formEl: FormInstance | undefined) => {
	console.log(formEl);
	if (!formEl) return;
	// 验证
	formEl.validate((valid: boolean): any => {
		if (valid) {
			console.log('submit!');
		} else {
			console.log('error submit!!');
			return false;
		}
	});
}


</script>
<style scoped lang="scss">
.login {
	display: flex;
	align-items: center;
	padding: 5vh 0;

	>div {
		width: 30%;
	}

	.right {
		.card {
			box-sizing: border-box;
			width: 25vw;
			padding: 30px;
			background: #FFF;
			border: 1px solid #E5E6EB;
			border-radius: 16px;

			>div {
				margin: 20px 0;
			}

			.title {
				margin: 30px 0;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 34px;
				font-weight: bold;
				color: #000;
			}

			.tabs {
				background: #FFF4E1;
				border-radius: 10px 10px 10px 10px;
				padding: 20px;

				>div {
					font-family: Microsoft YaHei, Microsoft YaHei;
					font-weight: 400;
					font-size: 16px;
					color: #F8C449;
				}
			}

			.row_ {
				>p {
					margin-bottom: 10px;
					font-family: "Microsoft YaHei", "Microsoft YaHei";
					font-size: 14px;
					font-weight: 400;
					color: #86909C;
				}

				.btn-tell {
					flex: 3;
					height: 58px;
					border: 1px solid #E5E6EB;
					border-radius: 8px;
				}

				.input_ {
					flex: 10;
					height: 58px;
					font-size: 18px;
				}

				.row_flex {
					display: flex;
				}
			}

			.made {
				display: flex;
				justify-content: space-between;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;
				align-items: start;
			}

			.btn {
				width: 100%;
				height: 50px;
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 18px;
				font-weight: 400;
				color: #FFF;
			}

			.bottom {
				font-family: "Microsoft YaHei", "Microsoft YaHei";
				font-size: 14px;
				font-weight: 400;
				color: #86909C;

				>a {
					color: #000;
					text-decoration: none;

					&:hover,
					&:active,
					&:focus {
						color: inherit;
						text-decoration: none;
					}
				}
			}
		}
	}

	.label-title {
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 14px;
		color: #86909C;
	}

	.check-code {
		position: absolute;
		right: 20px;
		bottom: 0;
		line-height: 58px;
		font-family: Microsoft YaHei, Microsoft YaHei;
		font-weight: 400;
		font-size: 18px;
		cursor: pointer;
		color: #000000;
	}
}
</style>

